<template>
	<view class="malfunction">
		<u-sticky bgColor="#fff">
			<view class="p-30">
				<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="输入仪器名称，如介质损耗测定仪"
					border="surround" :clearable="true" v-model="form.name" @confirm="getList" @clear="onClear"></u--input>
				<u-tabs :list="list1" @click="click" :activeStyle="{color: '#3c9cff', fontWeight: 'bold'}"></u-tabs>
			</view>
		</u-sticky>
		<u-empty v-if="!list.length" marginTop="50" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<view v-else class="p-x-30 bg-f7f8fa p-t-30">
			<view v-for="(item, index) in list" :key="index" class="format-item">
				<view class="format-tip" :class="[item.className]">{{item.statusName}}</view>
				<view class="format-content" @click="auditDetail(item)">
					<view class="malfunction-title">
						{{item.realName}}-{{activeTab}}
					</view>
					<u-line dashed></u-line>
					<u-row v-for="(obj, i) in detailList" :key="i"
						customStyle="font-size: 26rpx;color: #333333;padding: 10rpx 0;margin-top: 15rpx">
						<u-col span="3">
							<text class="detail-item-name">{{obj.name}}:</text>
						</u-col>
						<u-col span="9">
							<view class="text-e">{{item[obj.key]}}</view>
						</u-col>
					</u-row>
				</view>
				<view class="submit-btn" v-if="item.statusName=='待处理'">
					<u-button text="驳回" @click="onSubmit(item, false)" type="primary" :plain="true"
						:customStyle="{width: '140rpx',margin: 0,marginRight: '20rpx'}"></u-button>
					<u-button type="primary" text="通过" @click="onSubmit(item,true)"
						:customStyle="{width: '140rpx',margin: 0}"></u-button>
				</view>
			</view>
		</view>
		<view class="loadmore" v-if="list.length">
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
		</view>
		<u-gap height="160rpx"></u-gap>
		<u-modal :show="show" @confirm="onConfirm" @cancel="onCancel" ref="uModal" :showCancelButton="true">
			<u--form labelPosition="top" :model="auditForm" :rules="rules" ref="uForm" labelWidth="100%">
				<u-form-item :label="'驳回理由'" prop="comment" ref="item1" v-if="!auditForm.pass">
					<u--textarea v-model="auditForm.comment" placeholder="请输入内容" :confirmType="null"
						:showConfirmBar='false'></u--textarea>
				</u-form-item>
				<view v-else>确认通过？通过后将无法撤回</view>
			</u--form>
		</u-modal>
	</view>
</template>

<script>
	import SetTabBar from '@/mixins/SetTabBar.js'
	export default {
		mixins: [SetTabBar],
		onShow() {
			// #ifdef MP-WEIXIN
			this.setTabBarIndex(2);
			// #endif
			this.getInfo()
			this.getBadge()
			this.getList()
		},
		data() {
			return {
				show: false,
				roleIds: '',
				form: {
					page: 1,
					limit: 10,
					order: 'desc', // 排序，asc／desc
					orderField: `applicant_out_date`,
					name: '',
					status: '1,2'
				},
				code: '出库审批',
				total: 0,
				activeTab: '出库申请',
				list1: [{
					name: '出库申请',
					code: '出库审批',
					badge: {}
				}, {
					name: '外借申请',
					code: '外借审批',
					badge: {}
				}, {
					name: '入库申请',
					code: '入库审批',
					badge: {}
				}, {
					name: '外借入库',
					code: '归还审批',
					badge: {}
				}],
				detailList: [{
						name: '申报时间',
						key: 'applicantOutDate'
					},
					{
						name: '出库仪器',
						key: 'names'
					},
					{
						name: '出库数量',
						key: 'num'
					},
				],
				list: [],
				auditForm: {
					taskId: '',
					comment: '',
					pass: true
				},
				rules: {
					comment: {
						type: 'string',
						required: true,
						message: '请输入内容',
						trigger: ['blur']
					},
				}
			}
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.total > this.form.limit) {
				this.form.limit = this.form.limit + 10
				this.getList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.form.limit = 10
			this.getList()
			this.getBadge()
		},
		methods: {
			// 获取badge，没提供这个接口
			async getBadge() {
				let names = this.list1.map(item => item.code)
				this.$api.getFlowCount({
					roleIds: this.roleIds,
					taskNames: names.join(','),
					isRoleGroup: 1
				}).then(res => {
					this.list1.map(item => {
						item.badge = {
							value: res.data[item.code]
						}
					})
				})
			},
			click(e) {
				this.activeTab = e.name
				this.detailList[0].key = 'applicantOutDate'
				if (e.name == this.list1[0].name) {
					this.detailList[1].name = '出库仪器'
					this.detailList[2].name = '出库数量'
					this.code = '出库审批'
				} else if (e.name == this.list1[2].name) {
					this.detailList[1].name = '入库仪器'
					this.detailList[2].name = '入库数量'
					this.code = '入库审批'
					this.detailList[0].key = 'createTime'
				} else if (e.name == this.list1[1].name) {
					this.detailList[1].name = '外借仪器'
					this.detailList[2].name = '外借数量'
					this.code = '外借审批'
				} else if (e.name == this.list1[3].name) {
					this.detailList[1].name = '入库仪器'
					this.detailList[2].name = '入库数量'
					this.code = '归还审批'
				}
				this.getList()
			},
			onSubmit(data, pass) {
				this.show = true
				this.auditForm.taskId = data.taskId
				this.auditForm.pass = pass
				this.$nextTick(() => {
					this.$refs.uForm.setRules(this.rules)
				})
			},
			async onConfirm() {
				let apiName = 'onBack'
				if (this.auditForm.pass) {
					apiName = 'onPass'
				}
				this.$refs.uForm.validate().then(res => {
					this.$api[apiName](this.auditForm).then(res => {
						if (res.msg == 'success') {
							uni.showToast({
								title: '审核成功',
							})
							this.getList()
							this.getBadge()
							this.onCancel()
						}
					})
				}).catch(errors => {})
			},
			onCancel() {
				this.show = false
				this.$refs.uForm.resetFields()
				this.auditForm.comment = ''
			},
			auditDetail(item) {
				const {
					id,
					status,
					statusName,
					taskId
				} = item
				uni.navigateTo({
					url: `/pages/audit/detail?id=${id}&statusName=${statusName}&type=${this.activeTab}&taskId=${taskId}`
				})
			},
			// 清空仪器名称
			onClear() {
				this.form.name = ''
				this.getList()
			},
			getInfo() {
				const info = uni.getStorageSync('userInfo');
				if (info && JSON.parse(info).roleIdList) {
					this.roleIds = JSON.parse(info).roleIdList[0]
				}
			},
			// 获取工作流列表
			async getList() {
				this.list = []
				this.status = 'loading';
				let keys = []
				const res = await this.$api.getFlowList({
					roleIds: this.roleIds,
					taskName: this.code,
					isRoleGroup: 1
				})
				let list = res.data.list
				keys = res.data.list.filter(item => item.businessKey).map(item => item.businessKey)
				if (keys.length) {
					this.getDetailList(keys, list)
				}
				this.total = res.data.total
				this.status = this.total <= this.form.limit ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh();
			},
			// 根据工作流的id获取数据列表
			getDetailList(keys, list) {
				this.$api.getDetails({
					ids: keys.join(',')
				}).then(res => {
					this.list = res.data.map((item, index) => {
						item = Object.assign(item, list[index])
						item.num = item.instrumentsDTOs.length + '件'
						let names = item.instrumentsDTOs.map(data => data.name)
						item.names = names.join('、')
						item.realName = item.applicantUser ? item.applicantUser.realName : ''
						item.statusName = '待处理'
						item.className = 'bg-f4ad23'
						// 通过的样式
						// 	item.statusName = '已通过'
						// 	item.className = 'bg-09B300'
						return item
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.malfunction {
		.malfunction-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			padding-bottom: 20rpx;
		}

		.detail-item {
			font-size: 26rpx;
			color: #333333;
			padding: 10rpx 0;
		}

		.detail-item-name {
			color: #919191;
			padding-right: 30rpx;
		}

		.error {
			color: #666666;
			font-size: 22rpx;
			background: #F7F9FC;
			border-radius: 5rpx;
			padding: 24rpx;
		}

		.btn {
			position: fixed;
			bottom: 280rpx;
			right: 30rpx;
		}

		.submit-btn {
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx 20rpx 0;
		}
	}

	::v-deep .u-modal__content {
		flex-direction: column;
	}
</style>